<ion-header>
  <ion-toolbar color="winter">
    <ion-buttons left>
      <button (click)="goBack()" ion-button icon-only>
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <form [formGroup]="form">
      <div class="search-bar">
        <div class="search-input-container">
          <select class="select" (change)="change()"  formControlName="orderType"  [(ngModel)]="orderType">
            <option *ngFor="let item of orderTypes" [value]="item.VALUE_CODE">{{item.VALUE_TITLE}}</option>
          </select>
          <input type="text" formControlName="keyWord"  [(ngModel)]="keyWord" class="form-control" placeholder="搜索商品名称、编号">
        </div>
        <button type="button" class="btn-right" (click)="search()">搜索</button>
      </div>
    </form>
  </ion-toolbar>
</ion-header>

<ion-content class="content-primary">
  <!-- good -->
  <ion-grid *ngFor="let item of items;let i=index;" class='cart-main'>
    <ion-row>
      <ion-col class="goods-img" no-padding (click)="goGoodsDetail(item)" col-4>
        <img [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="../../../assets/img/null-img.png"' class="pic">
      </ion-col>
      <ion-col class="goods-info" no-padding>
        <ion-row>
          <ion-col class="goods-name" no-padding col-12 class='p-l-0'>
            <span (click)="goGoodsDetail(item)" class="name">
              <i *ngIf="item.PRODUCT_CATEGORY == 18" class="f-1-5 iconfont text-green-blue">&#xe689;</i>&nbsp;{{item.PRODUCT_NAME}}
            </span>
          </ion-col>
          <ion-col cno-padding col-12 class='p-l-0 goods-pv'>
            <span class="pv">
              PV: +${{orderType == '30' ? item.MP_PV : item.FP_PV}}
            </span>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col no-padding col-6 class='text-red goods-price'>
            &yen;&nbsp;{{orderType == '30' ? item.MP_PRICE : item.FP_PRICE}}
          </ion-col>
          <ion-col no-padding col-6 class='p-0 goods-cart' text-right>
            <i (click)="addCart(item)" class="iconfont i-add">&#xe63b;</i>
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!--null data-->
  <div class="show-default" *ngIf="showNull">
    <img src="../../assets/img/bg_null_data.png">
    <p class="message">没有相关数据</p>
  </div>

</ion-content>
<div class ="bg-model bg-model1" *ngIf="model==1">
  　　<div class = 'model-box'>
          <h3 class="b-b"><img  class="pic" onerror='this.src="assets/img/null-img.png"'  [(src)]="cartImg">  
            <div class='top'>
               <div class='title1'>{{PRODUCT_NAME}}</div>
               <div class='title-mony'>¥{{FP_PRICE}}</div>  
               <div class='tittle-type'>{{select_type}}</div> 
            </div>
            <i (click)='closeModal()' class="icon-gouwuche-tips-guanbi iconfont"></i></h3>
          <div class="content">
              <div class='title'> 颜色分类</div> 
              
                <div class="box">
                    <div *ngFor='let item of colorGroup1; let i = index' class="flex1" > 
                      
                       <ion-item>
                          <ion-label>{{item.name}}</ion-label>
                          <ion-checkbox  [(checked)]='item.checked' [(disabled)]='item.disabled' (click)="updateCucumber(item.checked,i)" [(ngModel)]="item.checked"></ion-checkbox>
                        </ion-item>
                      
                    </div>
                    
                      <div class="clear"></div>
                </div>
                
             
                <div class='title title-size'> 尺码</div> 
              
                <div class="box">
                    <div *ngFor='let item of sizeGroup1; let i = index' class="flex1" >  
                        <ion-item>
                            <ion-label>{{item.name}}</ion-label>
                            <ion-checkbox   [(checked)]='item.checked' [(disabled)]='item.disabled' (click)="sizeCucumber(item.checked,i)" [(ngModel)]="item.checked"></ion-checkbox>
                          </ion-item>
                    </div>
                </div>
                <div class="clear"></div>
               
              <ion-row *ngIf=false class="bg-white m-t p" >
                    <ion-col col-6 class='f-1-5'>商品数量</ion-col>
                    <ion-col col-6>
                      <div>
                        <span class="num-container">
                            <label class="reduce" (click)="reduce(item,i)"><i class="iconfont icon-gouwuche-shuliangjian"></i></label>
                            <input type="number" class="number" value="{{item.QTY}}" [(ngModel)]="item.QTY" (ngModelChange)="inputCheck(item)" >
                            <label class="add" (click)="add(item)"><i class="iconfont icon-gouwuche-shuliangjia"></i></label>
                          </span>
                      </div>
                    </ion-col>
              </ion-row>
          </div>
          <div class="footer b-t">
              
              <button class="footer-btn"  (click)="confirm()">确定</button>
          </div>
  　　</div>
  </div>